import React from 'react';
import _ from 'underscore';
import $ from 'jquery';

export default class TogglePanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showContent: this.props.collapsed ? false : true
    }
  }

  slideDown() {
    this.setState({
      showContent: true
    });
  }

  slideUp() {
    this.setState({
      showContent: false
    });
  }

  render() {
    var contentStyle = _.extend({
      height: this.state.showContent ? 'auto' : this.props.height,
      overflowY: this.props.overflowY,
      display: 'block'
    }, this.props.style);

    return (
      <div style={{
        'backgroundColor': 'transparent',
        'marginBottom': '0px',
        'padding': '0px 15px 0px 0px',
        'display': this.props.hidden ? 'none' : 'block'
      }} className="widget-normal">
        <div ref="content" className="widget-content" style={ contentStyle }>
          <div className="pure-u-23-24">
            {this.props.children}
          </div>
          <div style={{ 'margin': '5px 0 0 0' }} className="pure-u-1-24">
          {
            this.props.showControlButton
              ? (
                  this.state.showContent
                    ? (<a className="iconfont toggle-btn below" href="javascript:;" onClick={this.slideUp.bind(this)}>&#xe611;</a>)
                    : (<a className="iconfont toggle-btn" href="javascript:;" onClick={this.slideDown.bind(this)}>&#xe611;</a>)
                )
              : null
          }
          </div>
        </div>
      </div>
    )
  }
}

TogglePanel.defaultProps = {
  className: 'widget-normal',
  height: '45px',
  overflowY: 'hidden',
  collapsed: true,
  style: {},
  hidden: false,
  showControlButton: false
}
